<template>
  <div class="upload-container">
    <el-card class="upload-card" shadow="hover">
      <h3 class="upload-title">上传文档</h3>
      <el-upload
        ref="upload"
        drag
        :action="url"
        :before-upload="beforeUploadHandle"
        :on-success="successHandle"
        :on-error="errorHandle"
        :on-change="fileChangeHandle"
        v-model="fileList"
        :limit="1"
        :auto-upload="false"
        accept=".pdf,.doc,.docx,.txt"
        class="upload-area"
        :show-file-list="true">
        <i class="el-icon-document" style="font-size: 48px; color: #409EFF;"></i>
        <div class="el-upload__text">将文档拖到此处，或<em>点击选择文件</em></div>
        <div class="el-upload__tip">只支持 PDF、DOC、DOCX、TXT 格式的文档，且最多上传一个文件</div>
      </el-upload>
      <div class="upload-actions">
        <el-button type="primary" :disabled="!isFileSelected" @click="submitUpload">确定上传</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isFileSelected: false,
        visible: true,
        url: 'http://localhost:8081/emb',
        fileList: []
      }
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      fileChangeHandle(file, fileList) {
        this.isFileSelected = fileList.length > 0;
      },
      beforeUploadHandle(file) {
        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain']
        if (!allowedTypes.includes(file.type)) {
          this.$message.error('只支持 PDF、DOC、DOCX、TXT 格式的文档！')
          return false
        }
        if (this.fileList.length >= 1) {
          this.$message.warning('最多只能上传一个文件！')
          return false
        }
        return true
      },
      successHandle(response, file, fileList) {
        this.fileList = fileList
        console.log(response)
        if (response && response.code === 200) {
          this.$confirm('上传成功，是否继续上传？', '提示', {
            confirmButtonText: '继续上传',
            cancelButtonText: '关闭',
            type: 'info'
          }).then(() => {
            this.fileList = []
            this.isFileSelected = false
          }).catch(() => {
            this.visible = false
          })
        } else {
          this.$message.error(response.msg || '上传失败')
        }
      },
      errorHandle() {
        this.$message.error('上传失败，请重试')
      },
      closeHandle() {
        this.fileList = []
        this.isFileSelected = false
        this.visible = false
        this.$emit('refreshDataList')
      }
    }
  }
</script>

<style scoped>
.upload-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  background-color: #f5f7fa;
  min-height: 300px;
}

.upload-card {
  width: 480px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.2);
  background-color: #ffffff;
}

.upload-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  text-align: center;
}

.upload-area {
  border: 2px dashed #409EFF;
  border-radius: 6px;
  background-color: #f9faff;
  padding: 40px 20px;
  text-align: center;
}

.upload-area .el-upload__text {
  font-size: 16px;
  color: #606266;
  margin-top: 10px;
}

.upload-area .el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 6px;
}

.upload-actions {
  margin-top: 20px;
  text-align: center;
}
</style>